<template>
    <div class="member_detail">
        <header>会员详情</header>
        <div class="contents">
            <div class="member_info boxs" v-loading="loading">
                <div class="info_title titles">会员信息</div>
                <div class="info_list">
                    <div class="info_one">
                        <p>用户姓名：
                            <span>{{allData.USERNAME}}</span>
                        </p>
                        <p>手机号：
                            <span>{{allData.PHONE}}</span>
                        </p>
                        <p>会员等级：
                            <span v-if="allData.USERGRADE==1">普通</span>
                            <span v-if="allData.USERGRADE==2">银卡</span>
                            <span v-if="allData.USERGRADE==3">金卡</span>
                            <span v-if="allData.USERGRADE==4">钻石</span>
                        </p>
                    </div>
                    <div class="info_two">
                        <p>账户余额：
                            <span>￥{{allData.AMOUNT}}</span>
                        </p>
                        <p>可用积分：
                            <span>{{allData.CURRENTPOINT}}</span>
                        </p>
                        <p>优惠券：
                            <span>{{allData.NUM}}</span>
                        </p>
                    </div>
                </div>
            </div>
            <div class="table_card boxs">
                <div class="table_card_title titles">储值卡记录</div>
                <div class="table_one">
                    <el-table v-loading="loading1" :data="recordData1.CARDARR" style="width: 100%">
                        <el-table-column prop="TIME" label="变动时间" width="350">
                            <template slot-scope="scope">
                                <span v-if="scope.row.TIME">{{ scope.row.TIME | filterTimess }}</span>
                                <span v-else>--</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="RECORDTYPE" label="变动原因" width="350">
                            <template slot-scope="scope">
                                <span v-if="scope.row.RECORDTYPE==1">注册</span>
                                <span v-if="scope.row.RECORDTYPE==2">充值</span>
                                <span v-if="scope.row.RECORDTYPE==3">活动</span>
                                <span v-if="scope.row.RECORDTYPE==4">消费</span>
                                <span v-if="scope.row.RECORDTYPE==5">退货</span>
                                <span v-if="scope.row.RECORDTYPE==6">消费反结账</span>
                                <span v-if="scope.row.RECORDTYPE==7">退货反结账</span>
                                <span v-if="scope.row.RECORDTYPE==8">积分兑换消费</span>
                                <span v-if="scope.row.RECORDTYPE==9">充值送</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="AMOUNT" label="变动金额" width="350">
                            <template slot-scope="scope">
                                <span>+</span>￥{{scope.row.AMOUNT}}</template>
                        </el-table-column>
                        <el-table-column prop="BALANCE" label="变动后余额" width="350">
                            <template slot-scope="scope">￥{{scope.row.BALANCE}}</template>
                        </el-table-column>
                    </el-table>
                    <el-pagination @size-change="handleSizeChange1" @current-change="handleCurrentChange1" :current-page="page1" :page-sizes="[6, 8, 10]" :page-size="pageSize1" layout="total, sizes, prev, pager, next, jumper" :total="recordData1.COUNT"> </el-pagination>
                </div>
            </div>
            <div class="table_consume boxs" style="margin-top:50px;">
                <div class="table_consume_title titles">用户消费记录</div>
                <div class="table_two">
                    <el-table v-loading="loading2" :data="recordData2.ORDERARR" style="width: 100%">
                        <el-table-column prop="ORDERNO" label="订单号" width="250"> </el-table-column>
                        <el-table-column prop="SHOPNAME" label="门店名称" width="250"> </el-table-column>
                        <el-table-column prop="ORDERTIME" label="订单日期" width="250">
                            <template slot-scope="scope">
                                <span v-if="scope.row.ORDERTIME">{{ scope.row.ORDERTIME | filterTimess }}</span>
                                <span v-else>--</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="ORDER_STATUS" label="状态" width="140">
                            <template slot-scope="scope">
                                <span v-if="scope.row.STATUS==2&scope.row.PAY_STATUS==1">待服务</span>
                                <span v-if="scope.row.STATUS==3">待评价</span>
                                <span v-if="scope.row.STATUS==4">已完成</span>
                                <span v-if="scope.row.STATUS==5">已取消</span>
                                <span v-if="scope.row.STATUS==7">退款中</span>
                                <span v-if="scope.row.STATUS==8">已退款</span>
                                <span v-if="scope.row.STATUS==2&scope.row.PAY_STATUS==0">待付款</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="TOTALFEE" label="订单金额" width="130">
                            <template slot-scope="scope">￥{{scope.row.TOTALFEE}}</template>
                        </el-table-column>
                        <el-table-column prop="PAYAMOUNT" label="实付金额" width="130">
                            <template slot-scope="scope">￥{{scope.row.PAYAMOUNT}}</template>
                        </el-table-column>
                        <el-table-column prop="options" label="操作" width="140">
                            <template slot-scope="scope">
                                <span class="details" @click="goDetail(scope.row.ORDERID)">详情</span>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-pagination @size-change="handleSizeChange2" @current-change="handleCurrentChange2" :current-page="page2" :page-sizes="[6, 8, 10]" :page-size="pageSize2" layout="total, sizes, prev, pager, next, jumper" :total="recordData2.COUNT"> </el-pagination>
                </div>
            </div>
            <div class="blank" style="height:50px;background:#f0f2f5;"></div>
            <div class="table_exchange boxs">
                <div class="table_exchange_title titles">用户积分兑换记录</div>
                <div class="table_three">
                    <el-table v-loading="loading3" :data="recordData3.EXCHANGERECORDARR" style="width: 100%">
                        <el-table-column prop="TIME" label="兑换时间" width="280">
                            <template slot-scope="scope">
                                <span v-if="scope.row.TIME">{{ scope.row.TIME | filterTimess }}</span>
                                <span v-else>--</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="SHOPNAME" label="兑换门店" width="280"> </el-table-column>
                        <el-table-column prop="AMOUNT" label="兑换积分" width="260"> </el-table-column>
                        <el-table-column prop="SUBJECT" label="兑换礼品" width="260"> </el-table-column>
                        <el-table-column prop="BALANCE" label="兑换后积分" width="260"> </el-table-column>
                    </el-table>
                    <el-pagination @size-change="handleSizeChange3" @current-change="handleCurrentChange3" :current-page="page3" :page-sizes="[6, 8, 10]" :page-size="pageSize3" layout="total, sizes, prev, pager, next, jumper" :total="recordData3.COUNT"> </el-pagination>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        name: 'member_detail',
        data() {
            return {
                loading: true,
                allData: '', //会员详情数据
                loading1: true,
                loading2: true,
                loading3: true,
                recordData1: '', //储存卡记录
                recordData2: '', //用户消费记录
                recordData3: '', //用户积分兑换记录
                page1: 1, //当前页数
                page2: 1,
                page3: 1,
                pageSize1: 6, //每页多少条
                pageSize2: 6,
                pageSize3: 6,
            }
        },
        created() {
            this.getD();
            this.getCardRecord();
            this.getOrderRecord();
            this.getExchangeRecord();
        },
        methods: {
            //会员详情
            getD() {
                this.$axiosPost('/4SCAFE/CarUser/cafeMemberInfo.action', {
                    USER_ID: this.$route.params.id
                }).then(res => {
                    this.loading = true;
                    if(res.STATUS_CODE === 1) {
                        this.loading = false;
                        this.allData = res;
                    }
                    console.log(this.allData);
                })
            },
            //储存卡记录
            getCardRecord() {
                this.$axiosPost('/4SCAFE/CarUser/cardRecordByUserId.action', {
                    USER_ID: this.$route.params.id,
                    PAGE_NO: this.page1,
                    PAGE_SIZE: this.pageSize1
                }).then(res => {
                    this.loading1 = true;
                    if(res.STATUS_CODE === 1) {
                        this.loading1 = false;
                        this.recordData1 = res;
                    }
                    console.log(this.recordData1);
                })
            },
            //用户消费记录
            getOrderRecord() {
                this.$axiosPost('/4SCAFE/CarUser/getOrderRecordByUserId.action', {
                    USER_ID: this.$route.params.id,
                    PAGE_NO: this.page2,
                    PAGE_SIZE: this.pageSize2
                }).then(res => {
                    this.loading2 = true;
                    if(res.STATUS_CODE === 1) {
                        this.loading2 = false;
                        this.recordData2 = res;
                    }
                    //console.log(this.recordData2);
                })
            },
            //用户积分兑换记录
            getExchangeRecord() {
                this.$axiosPost('/4SCAFE/CarUser/pointExchangeRecordByUserId.action', {
                    USER_ID: this.$route.params.id,
                    PAGE_NO: this.page3,
                    PAGE_SIZE: this.pageSize3
                }).then(res => {
                    this.loading3 = true;
                    if(res.STATUS_CODE === 1) {
                        this.loading3 = false;
                        this.recordData3 = res;
                    }
                    //console.log(this.recordData3);
                })
            },
            handleSizeChange1(val) {
                this.loading1 = true;
                this.pageSize1 = val;
                this.getCardRecord();
            },
            handleCurrentChange1(val) {
                this.loading1 = true;
                this.page1 = val;
                this.getCardRecord();
            },
            handleSizeChange2(val) {
                this.loading2 = true;
                this.pageSize2 = val;
                this.getOrderRecord();
            },
            handleCurrentChange2(val) {
                this.loading2 = true;
                this.page1 = val;
                this.getOrderRecord();
            },
            handleSizeChange3(val) {
                this.loading3 = true;
                this.pageSize3 = val;
                this.getExchangeRecord();
            },
            handleCurrentChange3(val) {
                this.loading3 = true;
                this.page1 = val;
                this.getExchangeRecord();
            },
            //订单详情
            goDetail(id) {
                this.$router.push({
                    path: '/manages/orderDetail/' + id
                });
            },
        },
    }
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
    .member_detail {
        padding-bottom: 80px;
        header {
            background: #fff;
            font-size: 22px;
            font-weight: 700;
            padding: 20px;
        }
        .contents {
            .boxs {
                width: 97%;
                background: #fff;
                margin: 0 auto;
                padding-bottom: 25px;
                .el-pagination {
                    text-align: center;
                    margin-top: 30px;
                }
                .details {
                    color: #1d93ff;
                    cursor: pointer;
                    margin: 0 2px;
                    &:hover {
                        text-decoration: underline;
                    }
                }
            }
            .titles {
                height: 55px;
                margin-top: 30px;
                font-size: 20px;
                line-height: 55px;
                padding-left: 30px;
                border-bottom: 1px solid #DCDCDC;
                font-weight: 700;
            }
            .member_info {
                .info_list {
                    .info_one, .info_two {
                        display: flex;
                        justify-content: space-around;
                        p {
                            width: 20%;
                            span {
                                color: #606266;
                            }
                        }
                    }
                    .info_one {
                        margin-top: 25px;
                    }
                }
            }
        }
    }
</style>